<template>
    <div class="login-background">
        <div class="top"></div>
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
            <h3 class="login-title">欢迎登录</h3>
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit('loginForm')" :loading="loading"
                    :disabled="loading">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginf_config: require("@/config/init").default.config,
            loading: false,
            form: {
                username: '',
                password: ''
            },
            // 表单验证，需要在 el-form-item 元素中增加 prop 属性
            rules: {
                username: [
                    { required: true, message: '账号不可为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不可为空', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        onSubmit(formName) {
            var that = this
            that.$data.loading = true
            // 为表单绑定验证功能
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    // 表演验证通过，进行网络登录验证
                    // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                    // this.$router.push("/admin/home/index");
                    that.$axios.post("loginf:Auth/GetToken", {
                        ip:"127.0.0.1",
                        score:0,
                        loginName:that.$data.form.username,
                        loginPwd: that.$data.form.password,
                    })
                    .then(function (res) {
                        localStorage.setItem('express_admin_token', res.token)
                        // 获取用户权限列表
                        that.$axios.get("loginf:api/WL_UserInfo/ListUserRoleAndPermission?userId="+res.userId+"&permissionIds="+that.loginf_config.loginf.permissionId)
                            .then(auth_res=>{
                                console.log("权限列表：",auth_res)
                                if(auth_res.listRolePermission.length > 0){
                                    // 有权限进行登录
                                    // 存储权限列表
                                    var rol = []
                                    for(var i in auth_res.listRolePermission){
                                        for(var j in auth_res.listRolePermission[i].chileList){
                                            if(auth_res.listRolePermission[i].chileList[j].chileList.length <= 0){
                                                continue
                                            }
                                            for(var k in auth_res.listRolePermission[i].chileList[j].chileList){
                                                rol.push(auth_res.listRolePermission[i].chileList[j].chileList[k].path)
                                            }
                                        }
                                    }
                                    if(rol.length > 0 ){
                                        // 权限存储
                                        localStorage.setItem('express_admin_auth', JSON.stringify(rol))
                                        // 登录成功
                                        localStorage.setItem('express_admin_id', res.userId)
                                        localStorage.setItem('express_admin_name', res.userName)
                                        that.$router.push({ path: '/admin/home/index' })
                                        return
                                    }
                                }
                                that.$message.error("查无权限")
                            })
                    })
                    .catch(function (res) {
                        that.$data.loading = false
                    })
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.login-background {
    background-size: 100%;
    background-color: #909399;
    height: 100%;
    background: url(/static/background/login.png) repeat-y 0 0;
    background-size: 100%;
}

.login-box {
    background: #fff;
}

.top {
    width: 100%;
    height: 180px;
}

.login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 0 auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #303133;
}

.login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
}</style>